<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vueCD -->
</head>
<style>
    .active{
        color: rebeccapurple;
       
    }
    .line{
        background-color: royalblue;
    }
    li{
        cursor: pointer;
    }
</style>
<body>
    <div id="app">
			<!-- <h1 :class="{active:isActive,line:isLine}">{{msg}}</h1> -->
			<!-- 此处表示的是动态绑定类名，在一个对象里面，这是两个类名，
                此时active这个类名为true，所以会执行active这个类名，如果line也改为true，
                则h1就会出现两个类名 -->
			<!-- <h2 :class="getClass()">{{msg}}</h2> -->

            <!-- <button v-on:click='btnClick'>按钮</button> -->
            <!-- 此时当我们点击按钮的时候，会执行btnClick这个函数，通过控制
            isActive和isLine的布尔值，可以实现，类名的添加和取消 -->
<!-- 
            <ul>
                <li v-for='(item,index) in music' :key="index" :class='col()'>{{item}}</li>
            </ul> -->
            <a href="#" title="这是超链接">a标签</a>
            <img src="https://img1.baidu.com/it/u=693238871,4291527804&fm=224&fmt=auto&gp=0.jpg" alt="这是图片">
	</div>
	</body>
	<script>
			const app = new Vue({
				el:'#app',
				data:{
					msg:'你好，中国',
					isActive:true,
                    isLine:true,
                    music:['都无法测','我从未','湾东侧为','65626']
				},
                methods: {
                    btnClick(){
                        this.isActive = !this.isActive
                        this.isLine = !this.isLine
                    },
                    col(){
                        this.item.color = 'red'
                    },
                   getClass:function(){
                       return [this.active,this.line]
                   }
                }
			})
    </script>
</body>
</html>


